<template>
  <div>
    <el-button type="primary" @click="addSpec()" plain>添加规格</el-button>
    <!-- Form -->
    <el-dialog title="规格属性" :visible.sync="firstDialogFormVisible">
      <el-form :model="specs">
        <el-form-item label="规格名称">
          <el-input v-model="specs.specName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格">
          <el-input v-model="specsKey.keyName" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="规格值">
          <el-input v-model="specsValue.valueName" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="firstDialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="firstBeSure()">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog title="规格属性" :visible.sync="dialogFormVisible">
      {{specs}}
      <el-form :model="specs">
        <el-form-item label="规格名称">
          <el-input v-model="specs.specName" autocomplete="off"></el-input>
        </el-form-item><br>
        <span :key="index" v-for="(key,index) in specs.keyList">
          <el-tag closable @close='handleClose(key)'>
            {{key.keyName}}
          </el-tag><br>
          <el-tag :key="index" v-for="(value,index) in key.valueList" closable :disable-transitions="false"
            @close="handleClose2(key,value)">
            {{value.valueName}}
          </el-tag>
          <el-input class="input-new-tag" v-if="inputVisible" v-model="specsValue.valueName" ref="saveTagInput"
            size="small" @keyup.enter.native="handleInputConfirm" @blur="handleInputConfirm(key.valueList)"
            style="width:65px">
          </el-input>
          <el-button v-else class="button-new-tag" size="small" @click="showInput">+ 添加</el-button>
          <br>
        </span>
        <br>
        <el-button type="primary" @click="addNewSpec()">添加新规格</el-button>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="closeAdd()">取 消</el-button>
        <el-button type="primary" @click="saveSpec()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
//这里可以导入其他文件（比如：组件，工具 js，第三方插件 js，json文件，图片文件等等）
//例如：import 《组件名称》 from '《组件路径》';

export default {
  //import 引入的组件需要注入到对象中才能使用
  components: {},
  props: {},
  data () {
    //这里存放数据
    return {
      inputVisible: false,
      ids: [],
      multipleSelection: [],
      inputVisible: false,
      inputValue: "",
      formLabelWidth: 250,
      tableData: [],
      name: "",
      firstDialogFormVisible: false,
      dialogFormVisible: false,
      specs: {
        specName: "",
        keyList: []
      },
      specsKey: {
        keyName: "",
        valueList: []
      },
      specsValue: {
        valueName: ""
      }
    };
  },
  //计算属性 类似于 data 概念
  computed: {},
  //监控 data 中的数据变化
  watch: {},
  //方法集合
  methods: {
    getSpecList () {//获取规格列表
      this.$http
        .get('http://localhost:7001/specs/findSpecList')
        .then(({ data }) => {
          this.sepcList = data.data;
        }).catch((err) => { });
    },
    saveSpec () {//保存规格
      if (this.specs.id != null) {
        this.$http
          .put("http://localhost:7001/specs/updateSpecs/" + this.specs.id, this.specs)
          .then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: '修改规格成功!',
                type: 'success'
              });
              this.getSpecList();
              this.dialogFormVisible = false;
              this.firstDialogFormVisible = false;
            } else {
              this.$message.error('修改规格失败!');
            }
          }).catch((err) => { });
      } else {
        this.$http
          .post("http://localhost:7001/specs/addSpecs", this.specs)
          .then(({ data }) => {
            if (data.code == 0) {
              this.$message({
                message: '添加规格成功!',
                type: 'success'
              });
              this.$parent.getSpecList();
              this.dialogFormVisible = false;
              this.firstDialogFormVisible = false;
            } else {
              this.$message.error('添加规格失败!');
            }
          }).catch((err) => { });
      }
    },
    addNewSpec () {//添加新规格
      this.dialogFormVisible = false;
    },
    closeAdd () {//取消
      this.specs.keyList = [];
      this.specsKey = {
        keyName: "",
        valueList: []
      };
      this.specsValue = {
        valueName: ""
      }
      this.dialogFormVisible = false;
    },
    handleClose2 (key, value) {
      let a = this.specs.keyList.indexOf(key);
      this.specs.keyList[a].valueList.splice(this.specs.keyList[a].valueList.indexOf(value), 1);
    },
    handleClose (key) {
      this.specs.keyList.splice(this.specs.keyList.indexOf(key), 1);
      key.ValueList = [];
    },

    showInput () {
      this.inputVisible = true;
      // this.$nextTick(_ => {
      //   this.$refs.saveTagInput.$refs.input.focus();
      // });
    },

    handleInputConfirm (valueList) {
      if (this.specsValue.valueName != null && this.specsValue.valueName.length > 0) {
        valueList.push(this.specsValue);
      }
      this.inputVisible = false;
      this.specsValue = {
        valueName: "",
      }
    },
    addSpec () {//添加规格
      this.specs = {
        specName: "",
        keyList: []
      };
      this.specsKey = {
        keyName: "",
        valueList: []
      };
      this.specsValue = {
        valueName: ""
      };

      this.firstDialogFormVisible = true;
    },
    firstBeSure () {//第一次确认
      this.specsKey.valueList.push(this.specsValue);
      this.specs.keyList.push(this.specsKey);
      this.dialogFormVisible = true;
      this.specsKey = {
        keyName: "",
        valueList: []
      };
      this.specsValue = {
        valueName: ""
      }

    },
  },
  //生命周期 - 创建完成（可以访问当前 this 实例）
  created () {

  },
  //生命周期 - 挂载完成（可以访问 DOM 元素）
  mounted () {

  },
  beforeCreate () { }, //生命周期 - 创建之前
  beforeMount () { }, //生命周期 - 挂载之前
  beforeUpdate () { }, //生命周期 - 更新之前
  updated () { }, //生命周期 - 更新之后
  beforeDestroy () { }, //生命周期 - 销毁之前
  destroyed () { }, //生命周期 - 销毁完成
  activated () { }, //如果页面有 keep-alive 缓存功能，这个函数会触发
}
</script>
<style scoped>
</style>